﻿<template>
    <div class="RoleDetail">
        <MyDialog :model-value="true" :type="DialogType.C2" :title="title" @close="onClose">
            <el-form ref="RoleDetailFormRef" label-width="80" :model="thisData" :rules="rules">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="thisData.name" maxlength="50"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="thisData.remark" maxlength="500"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="数据权限" prop="dataPermissionType">
                            <el-radio-group v-model="thisData.dataPermissionType" @change="onRadioChange">
                                <el-radio :label="0">全部</el-radio>
                                <el-radio :label="1">部门</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="选择部门" v-if="thisData.dataPermissionType == Enums.Role_DataPermissionType.部门">
                            <DepartmentIds ref="RoleDepartmentIDsRef" v-model="thisData.roleDepartmentIDs" :isLoadingData="false"></DepartmentIds>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="功能权限">
                            <RolePermissionConfig v-model="thisData.permissionIDs"></RolePermissionConfig>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                        <el-form-item label="数据归属" prop="selectDepartmentIDs">
                            <DepartmentIds v-model="thisData.selectDepartmentIDs"></DepartmentIds>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <template #footer>
                <el-button type="primary" :loading="loading" @click="onSave">保存</el-button>
            </template>
        </MyDialog>
    </div>
</template>

<script lang="ts" setup>
import Enums from "@/gx/Enums";
import Gx from "@/gx/Gx";
import { FormRules } from "element-plus";
import { DialogType, TipsType } from "@/_gx/TsEnums";
import RolePermissionConfig from "./RolePermissionConfig.vue";
import { tokenStore } from "@/stores/tokenStore";

//接收父组件的传值
const rowAutoID = inject("rowAutoID") as Ref<number | null>;

//定义当前页面数据对象
const thisData = ref<any>({
    dataPermissionType: Enums.Role_DataPermissionType.全部,
    permissionIDs: [],
    selectDepartmentIDs: [-1],
});

//loading...
const loading = ref(false);

//定义表单验证规则
const rules = ref<FormRules>({
    name: [{ required: true, message: "请输入名称", trigger: "blur" }],
    selectDepartmentIDs: [{ required: true, message: "请选择数据归属", trigger: "blur" }],
});

//标题
const title = computed(() => {
    if (Gx.IsEmpty(rowAutoID.value)) {
        return "用户角色详情 - 创建";
    } else {
        return `用户角色详情 - 编辑 - ${thisData.value.name}`;
    }
});

//所有的部门数据，用在数据权限选择部门时
const allDepartments = ref([]);
const RoleDepartmentIDsRef = ref(null);

//初始化
const Init = async () => {
    await App.CallApi(Api.Department.GetAll(), {
        success: (res) => {
            allDepartments.value = Gx.List2Tree(res, "autoID");
        },
    });

    if (!Gx.IsEmpty(rowAutoID.value)) {
        await App.CallApi(Api.Role.GetByID(rowAutoID.value), {
            success: (res) => {
                thisData.value = res;

                if (thisData.value.dataPermissionType == Enums.Role_DataPermissionType.部门) {
                    nextTick(() => {
                        RoleDepartmentIDsRef.value.SetData(allDepartments.value);
                    });
                }
            },
        });
    }
};

const onRadioChange = () => {
    if (thisData.value.dataPermissionType == Enums.Role_DataPermissionType.部门) {
        nextTick(() => {
            RoleDepartmentIDsRef.value.SetData(allDepartments.value);
        });
    }
};

//表单Ref对象
const RoleDetailFormRef = ref(null);

//保存
const onSave = () => {
    RoleDetailFormRef.value.validate((isOk: boolean) => {
        if (!isOk) {
            return;
        }
        let _api = null;
        let _data = thisData.value;
        if (Gx.IsEmpty(rowAutoID.value)) {
            //添加
            _api = Api.Role.Insert;
        } else {
            //修改
            _api = Api.Role.Update;
        }

        if (_data.dataPermissionType == Enums.Role_DataPermissionType.全部) {
            _data.roleDepartmentIDs = [];
        }

        loading.value = true;
        App.CallApi(_api, {
            data: _data,
            success: (res) => {
                const store = tokenStore();

                let _idx = store.me.roleIDs.findIndex((x) => x == _data.roleID);
                if (_idx != -1) {
                    App.Alert({
                        msg: "保存成功，但需要重新登录！",
                        type: TipsType.Success,
                        onOk: () => {
                            App.Logout();
                        },
                    });
                } else {
                    emits("close", true);
                }
            },
            complete: () => {
                loading.value = false;
            },
        });
    });
};

//关闭
const onClose = () => {
    emits("close", false);
};

//向上抛出的事件与方法
const emits = defineEmits(["close"]);
defineExpose({ Init });
</script>
